<script setup lang="ts">
// import ColForm from "./components/ColForm/index.vue";
import { ref, reactive, shallowRef } from "vue";
import { Plus, Coin } from "@element-plus/icons-vue";

const formConfig = reactive({
  rules: [],
  formData: {
    radio: 1,
    radiogroup: 2,
  },
  labelWidth: 120,
  rowGutter: 10,
  colSpans: 6,
});

const test = ref()

fetch('/api/test').then(res => res.json()).then(res => {
  // formConfig.formData = res.data
  console.log(res)
})


const formList = reactive([
  {
    type: "text",
    model: "text",
    prop: "text",
    colSpan: 12,
    formLabel: "事件编码",
    formLabelPosition: "left",
    formLabelWidth: 100,
    formRequired: true,
    formRules: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    // formError: '234',
    formShowMessage: true,
    formInlineMessage: true,
    formSize: "large",
    formValidateStatus: "validating",
    maxlength: 200,
    minlength: 1,
    showWordLimit: true,
    placeholder: "请输入事件编码",
    formatter: (value: any) =>
      `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ","),
    parser: (value: any) => value.replace(/\$\s?|(,*)/g, ""),
    disabled: false,
    size: "large",
    prefixIcon: shallowRef(Plus),
    suffixIcon: shallowRef(Plus),
    prefix: () => "Plus",
    clearable: true,
    autocomplete: "no",
    prefixSlotName: "text-prefix",
    suffixSlotName: "text-suffix",
    class: 'text-class',
    blur: () => { console.log('失去焦点') },
    clear: () => { console.log('删除') },
    focus: () => { console.log('获取焦点') },
    input: () => { console.log('输入中') }
  },
  {
    colSpan: 12,
    type: "textarea",
    prop: "textarea",
    model: "textarea",
    formLabel: "测试文本域",
    formLabelWidth: 100,
    formRequired: true,
    formRules: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    formShowMessage: true,
    formInlineMessage: true,
    formSize: "large",
    formValidateStatus: "validating",
    maxlength: 200,
    minlength: 1,
    showWordLimit: true,
    placeholder: "请输入事件编码",
    size: "large",
    rows: 10,
    // inputStyle: { background: "red" },
    disabled: false,
    prefix: () => {
      return "sdfsdf";
    },
    clearable: true,
    autocomplete: "no",
    class: 'textarea-class'
  },
  {
    type: "password",
    prop: "password",
    model: "password",
    formLabel: "测试密码",
    formLabelWidth: 100,
    formRequired: true,
    formRules: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    formShowMessage: true,
    formInlineMessage: true,
    formSize: "large",
    formValidateStatus: "validating",
    maxlength: 200,
    minlength: 1,
    showWordLimit: true,
    placeholder: "请输入测试密码",
    size: "large",
    // inputStyle: { background: "red" },
    disabled: false,
    prefixIcon: shallowRef(Plus),
    suffixIcon: shallowRef(Plus),
    prefix: () => {
      return "sdfsdf";
    },
    clearable: true,
    autocomplete: "no",
  },
  {
    type: "number",
    prop: "number",
    model: "number",
    formLabel: "数字",
    formLabelWidth: 100,
    formRequired: true,
    formRules: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    formShowMessage: true,
    formInlineMessage: false,
    formSize: "large",
    formValidateStatus: "validating",
    min: 0,
    max: 10,
    step: 1,
    stepStrictly: false,
    precision: 2,
    size: "default",
    readonly: false,
    disabled: false,
    controls: true,
    controlsPosition: "",
    name: "",
    ariaLabel: "",
    placeholder: "我是数字",
    id: "",
    valueOnClear: "min",
    validateEvent: true,
    decreaseIcon: shallowRef(Coin),
    increaseIcon: shallowRef(Plus),
    prefix: "2134",
    suffix: "234",
  },
  {
    type: "inputtag",
    prop: "inputtag",
    model: "inputtag",
    formLabel: "inputtag",
    formLabelWidth: 100,
    formRequired: true,
    formRules: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    formShowMessage: true,
    formInlineMessage: false,
    formSize: "large",
    formValidateStatus: "validating",
    max: 20,
    tagType: "info",
    tagEffect: "dark",
    trigger: "Enter",
    draggable: true,
    delimiter: "-----",
    size: "large",
    saveOnBlur: true,
    clearable: true,
    disabled: false,
    validateEvent: true,
    readonly: false,
    autofocus: false,
    id: "",
    tabindex: "",
    maxlength: 10,
    minlength: 0,
    placeholder: "测试input-tag",
    tagSlotName: "inputtagTag",
    prefixSlotName: "inputtagPrefix",
    suffixSlotName: "inputtagSuffix",
  },
  {
    type: "radio",
    prop: "radio",
    model: "radio",
    formLabel: "单选",
    formLabelWidth: 100,
    formLabelPosition: "right",
    formRequired: true,
    formRules: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    formShowMessage: true,
    formInlineMessage: false,
    formSize: "large",
    formValidateStatus: "validating",
    defaultSlotName: "radioDefault",
    options: [
      {
        value: 1,
        label: "a",
        disabled: false,
        name: "",
        border: true,
        size: "default",
      },
      {
        value: 2,
        label: "b",
        disabled: false,
        name: "",
        border: false,
        size: "default",
      },
      {
        value: 3,
        label: "c",
        disabled: false,
        name: "",
        border: false,
        size: "default",
      },
    ],
  },
  {
    type: "radiogroup",
    prop: "radiogroup",
    model: "radiogroup",
    formLabel: "单选组",
    formLabelWidth: 100,
    formLabelPosition: "right",
    formRequired: true,
    formRules: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    formShowMessage: true,
    formInlineMessage: false,
    formSize: "large",
    formValidateStatus: "validating",
    defaultSlotName: "radiogroupDefault",
    options: [
      {
        value: 1,
        label: "a",
        disabled: false,
        name: "",
        border: true,
        size: "default",
      },
      {
        value: 2,
        label: "b",
        disabled: false,
        name: "",
        border: false,
        size: "default",
      },
      {
        value: 3,
        label: "c",
        disabled: false,
        name: "",
        border: false,
        size: "default",
      },
    ],
  },
  {
    type: "radiobuttongroup",
    prop: "radiobuttongroup",
    model: "radiobuttongroup",
    formLabel: "单选组",
    formLabelWidth: 100,
    formLabelPosition: "right",
    formRequired: true,
    formRules: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    formShowMessage: true,
    formInlineMessage: false,
    formSize: "large",
    formValidateStatus: "validating",
    defaultSlotName: "radiobuttongroupDefault",
    options: [
      {
        value: 1,
        label: "a",
        disabled: false,
        name: "",
        border: true,
        size: "default",
      },
      {
        value: 2,
        label: "b",
        disabled: false,
        name: "",
        border: false,
        size: "default",
      },
      {
        value: 3,
        label: "c",
        disabled: false,
        name: "",
        border: false,
        size: "default",
      },
    ],
  },
  {
    type: "select",
    prop: "select",
    model: "select",
    formLabel: "下拉菜单",
    formLabelWidth: 100,
    formLabelPosition: "right",
    formRequired: true,
    formRules: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    formShowMessage: true,
    formInlineMessage: false,
    formSize: "large",
    formValidateStatus: "validating",
    optionsGroup: [
      {
        label: "group1",
        options: [
          {
            label: 1,
            value: 1,
          },
          {
            label: 2,
            value: 2,
          },
          {
            label: 3,
            value: 3,
          },
        ],
      },
    ],
    options: [
      {
        value: 1,
        label: 1,
        disabled: false,
      },
      {
        value: 2,
        label: 2,
        disabled: true,
      },
    ],
    multiple: false,
    collapseTags: false,
    filterable: true,
    loading: false,
    remote: true,
    reserveKeyword: true,
    remoteMethod: () => {
      formList[8].loading = true;
      setTimeout(() => {
        formList[8].loading = false;
      }, 1000);
    },
    size: "small",
    clearable: true,
    // defaultSlotName:'selectDefault'
    headerSlotName: "selectHeader",
    footerSlotName: "selectFooter",
    prefixSlotName: "selectPrefix",
    emptySlotName: "selectEmpty",
    tagSlotName: "selectTag",
    loadingSlotName: "selectLoading",
    labelSlotName: "seletcLabel",
  },
  {
    // 'year' | 'years' |'month' | 'months' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange' | 'yearrange'
    type: "years",
    prop: "years",
    model: "years",
    formLabel: "时间菜单",
    formLabelWidth: 100,
    formLabelPosition: "right",
    formRequired: true,
    formRules: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    formShowMessage: true,
    formInlineMessage: false,
    formSize: "large",
    formValidateStatus: "validating",
    readonly: false,
    disabled: false,
    editable: false,
    clearable: true,
    size: "small",
    placeholder: "么么哒",
    arrowControl: false,
    format: "YYYY-MM-DD HH:mm:ss",
    popperClass: "datetime-test",
    rangeSeparator: "---",
    defaultValue: new Date("2025-12-12"),
    defaultTime: [
      new Date(2000, 1, 1, 0, 0, 0),
      new Date(2000, 2, 1, 23, 59, 59),
    ],
    valueFormat: "YYYY-MM-DD HH:mm:ss",
    unlinkPanels: true,
    prefixIcon: shallowRef(Plus),
    clearIcon: shallowRef(Coin),
    disabledDate: () => false,
    cellClassName: () => "cellClassName",
    valueOnClear: undefined,
    emptyValues: undefined,
    showNow: false,
    defaultSlotName: "datetime-default",
    prevMonthSlotName: "datetime-prev",
    nextMonthSlotName: "datetime-next",
    prevYearSlotName: "datetime-prev-year",
    nextYearSlotName: "datetime-next-year",
    startPlaceholder: "start",
    endPlaceholder: "end",
  },
  {
    type: "timepicker",
    prop: "timepicker",
    model: "timepicker",
    formLabel: "时间选择器",
    formLabelWidth: 100,
    formLabelPosition: "right",
    formRequired: true,
    formRules: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    formShowMessage: true,
    formInlineMessage: false,
    formSize: "large",
    formValidateStatus: "validating",
    readonly: false,
    disabled: false,
    clearable: true,
    size: "large",
    placeholder: "时间菜单",
    isRange: true,
    prefixIcon: shallowRef(Plus),
  },
  {
    type: "timeselect",
    prop: "timeselect",
    model: "timeselect",
    formLabel: "时间下拉菜单",
    formLabelWidth: 100,
    formLabelPosition: "right",
    formRequired: true,
    formRules: [
      {
        required: true,
        message: "Please input Activity name",
        trigger: "blur",
      },
    ],
    formShowMessage: true,
    formInlineMessage: false,
    formSize: "large",
    formValidateStatus: "validating",
    readonly: false,
    disabled: false,
    includeEndTime: true,
    size: "large",
    placeholder: "时间下来菜单",
    effect: "dark",
    prefixIcon: shallowRef(Plus),
    clearIcon: shallowRef(Coin),
    start: "08:30",
    step: "00:15",
    end: "18:30",
    minTime: "09:00",
    maxTime: "12:00",
  },
  {
    type: "colorpicker",
    prop: "colorpicker",
    model: "colorpicker",
    formLabel: "颜色选择",
    formLabelWidth: 100,
    formLabelPosition: "right",
    formRequired: true,
    formShowMessage: true,
    formInlineMessage: false,
    formSize: "large",
    formValidateStatus: "validating",
    disabled: false,
    size: "large",
    showAlpha: true,
    colorFormat: "rgb",
    popperClass: "test",
  },
]);

function validate() {
  test.value.validate()
}

function validateField() {
  test.value.validateField('text', (val: any) => {
    console.log(val)
  })
}

function resetFields() {
  test.value.resetFields()
}

function scrollToField() {
  test.value.scrollToField('timeselect')
}

function clearValidate() {
  test.value.clearValidate()
}

function fields() {
  console.log(test.value.fields)
}
function getField() {
  console.log(test.value.getField('text'))
}

const dialogVisible = ref(false)

</script>

<template>
  <h2>测试页面</h2>
  {{ formConfig.formData }}
  <el-button @click="() => dialogVisible = !dialogVisible">开关</el-button>
  <el-dialog v-model="dialogVisible" title="Tips" width="1000">
    <el-button @click="validate">validate</el-button>
    <el-button @click="validateField">validateField</el-button>
    <el-button @click="resetFields">resetFields</el-button>
    <el-button @click="scrollToField">scrollToField</el-button>
    <el-button @click="clearValidate">clearValidate</el-button>
    <el-button @click="fields">fields</el-button>
    <el-button @click="getField">getField </el-button>

    <AllForm ref="test" :model="formConfig.formData" :rules="formConfig.rules" :labelWidth="formConfig.labelWidth"
      :rowGutter="formConfig.rowGutter" :colSpan="formConfig.colSpans" :formItem="formList">
      <!-- <template #text>
      插槽text
    </template> -->
      <template #text-prefix> sdf678 </template>
      <!-- <template #datetime-default>
      时间默认内容
    </template> -->
      <template #datetime-prev> prev </template>
      <template #datetime-next> next </template>
      <template #datetime-prev-year> prev-year </template>
      <template #datetime-next-year> next-year </template>

      <template v-slot:inputtagTag="{ data }"> 嘿嘿嘿-{{ data.value }} </template>
      <template #radioDefault="value">
        {{ value }}
      </template>
      <template #radiogroupDefault="data">
        radiogroupDefault---{{ data }}
      </template>
      <template #radiobuttongroupDefault="data"> 45{{ data.label }} </template>

      <template #selectHeader> select头部插槽 </template>
      <template #selectFooter> select底部插槽 </template>
      <template #selectPrefix> 前缀 </template>
      <template #selectEmpty>
        <!-- 下来菜单空白 -->
      </template>
      <template #selectTag> 嘿嘿嘿 </template>
      <template #selectLoading> 211111 </template>
      <template #seletcLabel="data"> select的label{{ data }} </template>
    </AllForm>
  </el-dialog>


</template>
